import React from 'react';
import { Form, Table, InputNumber } from 'antd';
import LimitInput from '@/components/LimitInput';

const TYPE_MAP = {
    1: {
        point: '工作结果',
        info: '结果不通过不超过次数',
        weekValue: 3,
        monthValue: 3,
        quarterValue: 3
    },
    2: {
        point: '工作时效性',
        info: '逾期不超过次数',
        weekValue: 3,
        monthValue: 3,
        quarterValue: 3
    },
    3: {
        point: '工作饱和度',
        info: '不低于部门平均饱和度百分比',
        weekValue: 80,
        monthValue: 80,
        quarterValue: 80
    }
};

const Result = ({ form, data, ...rest }) => {
    const { getFieldDecorator } = form;

    const { taskAssessVO } = data || {};
    let { detail } = taskAssessVO || {};

    if (!detail || detail.length === 0) {
        detail = [
            {
                type: 1
            },
            {
                type: 2
            },
            {
                type: 3
            }
        ];
    }

    const columns = [
        {
            title: '类型',
            dataIndex: 'point'
        },
        {
            title: '考核条件',
            dataIndex: 'info'
        },
        {
            title: '周评考核标准',
            dataIndex: 'weekValue',
            render: (text, record) => (
                <Form.Item style={{ margin: 0 }}>
                    {getFieldDecorator(`weekValue${record.type}`, {
                        rules: [
                            {
                                required: true,
                                message: '请输入'
                            }
                        ],
                        initialValue: text
                    })(
                        <InputNumber
                            placeholder="请输入"
                            min={0}
                            max={100}
                            precision={0}
                            style={{ width: 80, marginRight: 8 }}
                        />
                    )}
                    {record.type === 3 ? '%' : '次'}
                </Form.Item>
            )
        },
        {
            title: '月评考核标准',
            dataIndex: 'monthValue',
            render: (text, record) => (
                <Form.Item style={{ margin: 0 }}>
                    {getFieldDecorator(`monthValue${record.type}`, {
                        rules: [
                            {
                                required: true,
                                message: '请输入'
                            }
                        ],
                        initialValue: text
                    })(
                        <InputNumber
                            placeholder="请输入"
                            min={0}
                            max={100}
                            precision={0}
                            style={{ width: 80, marginRight: 8 }}
                        />
                    )}
                    {record.type === 3 ? '%' : '次'}
                </Form.Item>
            )
        },
        {
            title: '季评考核标准',
            dataIndex: 'quarterValue',
            render: (text, record) => (
                <Form.Item style={{ margin: 0 }}>
                    {getFieldDecorator(`quarterValue${record.type}`, {
                        rules: [
                            {
                                required: true,
                                message: '请输入'
                            }
                        ],
                        initialValue: text
                    })(
                        <InputNumber
                            placeholder="请输入"
                            min={0}
                            max={100}
                            precision={0}
                            style={{ width: 80, marginRight: 8 }}
                        />
                    )}
                    {record.type === 3 ? '%' : '次'}
                </Form.Item>
            )
        }
    ];

    const getFinalList = () =>
        detail.map(item => ({
            ...TYPE_MAP[item.type],
            ...item
        }));

    return (
        <Form {...rest}>
            <Form.Item label="任务要求">
                <div style={{ display: 'flex' }}>
                    考评周期间被分配任务明细存在
                    {getFieldDecorator('taskAssessVO.requirementsCount', {
                        initialValue:
                            typeof taskAssessVO?.requirementsCount !== 'undefined'
                                ? taskAssessVO?.requirementsCount
                                : 1,
                        rules: [
                            {
                                required: true,
                                message: '任务要求不能为空'
                            }
                        ]
                    })(
                        <InputNumber
                            placeholder="请输入"
                            allowClear
                            min={0}
                            max={3}
                            precision={0}
                            style={{ width: 154, margin: '4px 8px 0' }}
                        />
                    )}
                    项不达标时，则为不合格
                </div>
            </Form.Item>
            <Form.Item label="任务考核" required>
                <Table
                    rowKey="type"
                    columns={columns}
                    dataSource={getFinalList() || []}
                    pagination={false}
                    scroll={{ x: 'max-content' }}
                />
            </Form.Item>
            <Form.Item label="任务指标说明" style={{ marginBottom: 12, maxWidth: 800 }}>
                {getFieldDecorator('taskAssessVO.instructions', {
                    initialValue: taskAssessVO?.instructions || ''
                })(
                    <LimitInput
                        area
                        placeholder="请输入任务指标说明"
                        autoSize={{ minRows: 3, maxRows: 6 }}
                        maxLength={4000}
                    />
                )}
            </Form.Item>
        </Form>
    );
};

export default Result;
